<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">红色</button>
    <button id="btn2">蓝色</button>
    <button id="btn3">绿色</button>
    <button id="btn4">粉色</button>

    <div id="btn30"></div>
    <script>
        //var定义一个变量oBtn1用来存储一个dom元素
        /* 
        DOM元素:
        Document(文档) Object（对象） Model（模型）
        那个DOM元素：document这个对象的方法：
            get-----（获取）
            Element-----(元素）
            By-----(通过...的方式)
            Id-----(通过id的方式）


        */


        var oBtn1 = document.getElementById('btn1')
        var oBtn2 = document.getElementById('btn2')
        var oBtn3 = document.getElementById('btn30')
        var oBtn4 = document.getElementById('btn4')

        function changeColor(color) {//parms(agruments)参数
            document.body.style.background = color
        }
        /* 
        document       ------------对象（全局范围）
        document.body  -----------全局对象中的（标签为body）body元素
        document.body.style   ----设置body元素的样式----》什么样式？
        document.body.style.background    ------------》background：背景
        document.body.style.background = color ---------设置背景的颜色为：传入的参数的值color
        ===》
        因为这里传入的参数color代表的是颜色的意思，然后这里参数传进来之后，赋值给了我们的document.body.style.background
        就实现了背景颜色的改变
        eg（例子）：
            changeColor("red");   ------------改变背景颜色为red（红色）

        ==》从而实现我们这个改变背景颜色的功能函数或方法
        
        */
        oBtn1.onclick = function () {
            //( . )-------上面小数点是调用的意思
            //onclick-----点击事件
            changeColor("red");
        }

        /* 
        oBtn1:
        */
        oBtn2.onclick = function () {
            changeColor("blue");
        }
        oBtn3.onclick = function () {
            changeColor("green");
        }
        oBtn4.onclick = function () {
            changeColor("hotpink");
        }
        
    </script>
</body>
</html>